<template>
	<view class="xbd-button-group">
		<button type="default" class="left" @click="clickLeft">{{ liftTitle }}</button>
		<button type="default" class="right" @click="clickRight">{{ rightTitle }}</button>
	</view>
</template>

<script>
	export default {
		name: 'XbdButtonGroup',
		props: {
			liftTitle: String,
			rightTitle: String
		},
		methods: {
			clickLeft() {
				this.$emit('clickLeft')
			},
			clickRight() {
				this.$emit('clickRight')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.xbd-button-group {
		display: flex;
		justify-content: space-between;
		align-items: center;
		button {
			width: 310rpx;
			height: 32px;
			line-height: 32px;
			text-align: center;
			border-radius: 8rpx;
			
			font-size: 14px;
		}
		.left {
			color: #FFFFFF;
			background: url(../../static/images/meal/gary.png) no-repeat;
			background-size: 100% 100%;
			&:after {
				border: 0;
			}
		}
		.right {
			color: #FFFFFF;
			background: url(../../static/images/common/bluebg.png) no-repeat;
			background-size: 100% 100%;
		}
	}
</style>
